<template>
    <el-row>
        <el-col :span="12" v-for="(o, index) in show  " :key="index">
            <el-card :body-style="{ padding: '0px' }" style="margin: 5px">
                <img :src="o.shoppicture" class="image">
                <div style="padding: 0px;width: 65%; float: left; margin: 0" >
                    <div class="body">
                        <br>
                        <h1>{{ o.shopname }}</h1>
                        <div class="bottom clearfix">
                            <el-rate
                                v-model="o.score"
                                disabled
                                show-score
                                text-color="#ff9900"
                                score-template="{value}分"
                                style="line-height: 20px">
                            </el-rate>
                            <el-divider></el-divider>
                            <p class="time">{{ o.shopAddress }}</p>
                        </div>
                    </div>
                    <el-button type="text" class="button" style="display: block;font-size: 15px" @click="toShow(o)">
                        进店看看
                        <i class="el-icon-right"></i>
                    </el-button>
                </div>
            </el-card>
        </el-col>
        <el-col>
            <div class="block" style="text-align: center">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageNum"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    :total="list.length">
                </el-pagination>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import storeSearch from "@/api/storeSearch";
export default {
    data() {
        return {
            currentDate: new Date(),
            list:[],
            show:[],
            pageNum:1,
        };
    },
    methods:{
        handleCurrentChange(val) {
            this.pageNum = val;
            this.show = this.list.slice((this.pageNum-1)*10,this.pageNum*10)
        },
        toShow(showOne){
            var One = JSON.stringify(showOne)
            this.$router.push('/storeShow/'+encodeURIComponent(One))
        }
    },
    beforeCreate() {
        storeSearch.searchAll().then((response)=>{
            if (response.data.data.length!==0){
                this.list = response.data.data;
                this.show = this.list.slice(this.pageNum-1,10)
            }
        });
    }
}
</script>

<style scoped>
.time {
  font-size: 14px;
  color: #999;
}
h1{
    font-size: 27px;
    line-height: 30px;
    font-weight: 400;
    color: #606266
}
.bottom {
  margin-top: 13px;
  line-height: 18px;
}
.body{
    width: 80%;
    height: 80%;
}
.button{
   float: right;
}
.image {
  width: 30%;
  padding: 10px;
  display: block;
  float: left;
  border-radius: 4px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
.el-divider--horizontal{
    margin: 5px 0;
}
.el-rate>>>.el-rate__icon{
    font-size: 20px !important;
    margin-right: 0 !important;
}
.el-rate>>>.el-rate__text{
    font-size: 15px;
    vertical-align: top;
    margin-left: 2px;
}
</style>